<template>
  <div class="modal-wide-wrap" v-if="isShow">
    <Modal class-name="modal-wide" :width="modalWidth" v-model="isShow">
      <slot slot="header" name="header"></slot>
      <div class="modal-wide-body" :style="{ height: listHeight + 'px' }">
        <slot></slot>
      </div>
      <slot slot="footer" name="footer"></slot>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      clientWidth: 768,
      clientHeight: 400,
    };
  },
  computed: {
    modalWidth() {
      if (this.clientWidth > 1200) {
        return 1200;
      }
      if (this.clientWidth < 520) {
        return 520;
      }
      return this.clientWidth - 100;
    },
    listHeight() {
      return this.clientHeight - 200 - 50;
    },
  },
  watch: {
    isShow(newval) {
      if (!newval) {
        this.$emit("close");
      }
    },
  },
  methods: {
    resize() {
      this.clientWidth = document.documentElement.clientWidth;
      this.clientHeight = document.documentElement.clientHeight;
    },
  },
  mounted() {
    this.resize();
    window.addEventListener("resize", this.resize);
  },
  beforeDestory() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>

<style lang="less">
.modal-wide-wrap {
  position: relative;
}
.modal-wide {
  .ivu-modal {
    top: 50px;
    .ivu-modal-close {
      top: 12px;
    }
    .ivu-modal-header {
      padding: 14px 20px;
      padding-right: 40px;
    }
    .ivu-modal-body {
      padding: 16px 0;
    }
  }
}
.modal-header {
  .select-people {
    width: 200px;
  }
  @media screen and (max-width: 1000px) {
    .select-people {
      width: 100px;
    }
  }
}
.modal-wide-body {
  overflow: auto;
}
</style>
